<template>
  <div class="divisional">
    <div class="search_box">
      <el-row :gutter="40">

        <el-col :span="6">
          <span class="inpText">姓名</span>
          <el-input v-model.trim="paramsInfo.name" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"
            style="width: 60%;"></el-input>
        </el-col>
        <el-col :span="6">
          <span class="inpText">身份证号</span>
          <el-input v-model.trim="paramsInfo.identificationNumber" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"
            style="width: 60%;"></el-input>
        </el-col>
        <el-col :span="6">
          <span class="inpText">卡号</span>
          <el-input v-model.trim="paramsInfo.cardNumber" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
        </el-col>
        <div class="v_box" style="display: inline-block;">
          <label for>案件进度</label>
          <el-select v-model.trim="paramsInfo.progressCases" size="small" placeholder="请选择">
            <el-option value=""><span>请选择</span></el-option>
            <el-option v-for="item in yuqiOptions" :key="item.index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <el-col :span="6">
          <span class="inpText">委外公司</span>
          <el-input v-model.trim="paramsInfo.outCompanyName" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"
            style="width: 60%;"></el-input>
        </el-col>
        <el-col :span="6">
        </el-col>
        <el-col :span="6">
        </el-col>
        <div align="right" style="display: inline-block;">
          <el-button size="small" type="primary" @click="search">查询</el-button>
          <el-button size="small" type="primary" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="exportExcel">下载模板</el-button>
          <el-upload style="display: inline;margin-left: 10px;" class="upload" action="" :multiple="false"
            :show-file-list="false" accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :http-request="httpRequest">
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
        </div>
      </el-row>
    </div>

    <!-- 列表 -->
    <el-col :span="24">
      <el-table :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}" max-height="500px"
        style="width: 100%">
        <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" width="180" :formatter="hidInfo"></el-table-column>
        <el-table-column prop="caseType" label="卡类型" :formatter="cardTypeToZN" width="100"></el-table-column>
        <el-table-column prop="identificationNumber" label="身份证号" width="180" :formatter="hidInfo"></el-table-column>
        <el-table-column prop="progressCases" label="案件进度" width="150"></el-table-column>
        <el-table-column prop="outCompanyName" label="委外公司" width="200"></el-table-column>
        <el-table-column prop="principal" label="立案本金" width="120"></el-table-column>
        <el-table-column prop="currentPrincipal" label="当前本金" width="120"></el-table-column>
        <el-table-column prop="caseValue" label="立案案值" width="120"></el-table-column>
        <el-table-column prop="currentCaseValue" label="当前案值" width="120"></el-table-column>
        <el-table-column prop="legalCost" label="垫付诉讼费" width="120"></el-table-column>
        <el-table-column prop="interest" label="利息" width="120"></el-table-column>
        <el-table-column prop="criminalCost" label="费用" width="120"></el-table-column>
        <el-table-column prop="judgementNumber" label="判决编号" width="120"></el-table-column>
        <el-table-column prop="judgementDate" label="判决时间" width="120"></el-table-column>
        <el-table-column prop="executeNumber" label="执行编号" width="120"></el-table-column>
        <el-table-column prop="executeDate" label="执行时间" width="120"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-col>

    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15,20]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, slot, jumper">
      </el-pagination>
    </div>

  </div>
</template>
<script>
  import XLSX from 'xlsx'
  import {Message} from "element-ui";
  import {cmcUrl} from '../../../../static/baseUrl'
  const ExportJsonExcel = require('js-export-excel')
  export default {
    data() {
      return {
        paramsInfo: {
          name: "",
          identificationNumber: "",
          cardNumber: "",
          progressCases: "",
          outCompanyName: "",
        },
        fileName: "",
        cardNumber: "",
        identificationNumber: "",
        progressCases: "",
        excelTitle: ['批次号','身份证号', '姓名', '卡号', '立案案值', '当前案值', '立案本金', '当前本金', '利息', '费用', '垫付诉讼费', '判决编号', '判决时间','执行编号', '执行时间', '委外公司名称','支行机构编码','分行机构编码'], //excel的表头，与excelColumn，需一一对应
        excelColumn:['oldBatchNumber','identificationNumber','name','cardNumber','caseValue','currentCaseValue','principal','currentPrincipal','interest','criminalCost','legalCost','judgementNumber','judgementDate','executeNumber','executeDate','outCompanyName','zhiInstitution','fenInstitution'],//导出excel每列对应的数据，
        dateColumn:['judgementDate','executeDate'],
        dateVlaue: "",
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        tableData: [],
        //   逾期选择
        isFirstIssue: "",
        yuqiOptions: [{
            label: "已发起诉讼",
            value: "已发起诉讼",
            index: 1,
          },
          {
            label: "已立案",
            value: "已立案",
            index: 2,
          },
          {
            label: "已判决",
            value: "已判决",
            index: 3,
          },
          {
            label: "执行终结",
            value: "执行终结",
            index: 4,
          },
        ],

        //   详情
        detailInfo: [],
        infoRecords: [],
        importData:[],
        cardTypeOptions: this.GLOBAL.cardTypeOptions,
      };
    },
    created() {
      this.checkInfo();
    },
    methods: {
      cardTypeToZN(row, column, cellValue, index){
        let ttt = this.cardTypeOptions.find((element) => (element.value == cellValue));
        return ttt ? ttt.label : "";
      },
      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      httpRequest(e) {
        let file = e.file // 文件信息
        console.log('e: ', e)
        console.log('file: ', e.file)

        if (!file) {
          // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据自己需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }
        this.fileName = file.name;
        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary' // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0] // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
            console.log(exl)
            // 将 JSON 数据挂到 data 里
            this.importData = exl;
            this.importData.forEach((item) => {
              console.log("item,,", item);
            });

            this.uploadData();
          } catch (e) {
            console.log('出错了：：')
            return false
          }
        }
        fileReader.readAsBinaryString(file)
      },
      uploadData() {
        if (this.importData.length > 0) {
          let dataArr = this.translateKeys();
          let params = {
            fileName: this.fileName,
            type: 1,//1为民事
            datas: JSON.stringify(dataArr),
          }
          this.$axios({
              method: "post",
              url: `/CMC/reserver/import/data`,
              data: params,
            })
            .then((res) => {
              console.log(res, "上传数据");
              if (res.code == 200) {
                //this.tableData = res.data.list;
                this.$message.success(res.message);
                this.checkInfo();
              } else {
                this.$message.success(res.message);
              }
            })
            .catch((err) => {});
        } else {
          console.log("this.importData.length==", this.importData.length);
          Message.warning("文档数据为空，请检查！");
        }

      },
      translateKeys(){
        let tempArr = [];
        Object.keys(this.importData).forEach((item) => {
          let tempMap = {};
          let mm = this.importData[item];

          Object.keys(this.excelTitle).forEach((item) => {
            let ss = this.excelTitle[item];
            let key = this.excelColumn[item];
            if(mm[ss]){
              if(this.dateColumn.indexOf(key)>-1){
                let tempDate = this.$moment(mm[ss]).format("YYYY-MM-DD");
                this.$set(tempMap,key,tempDate);
              }else{
                this.$set(tempMap,key,mm[ss]);
              }
            }else{
              this.$set(tempMap,key,"");
            }

          });
          tempArr.push(tempMap);
        })
        return tempArr;
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },


      exportExcel() {
        var moment = require("moment");
        var aData = moment(new Date()).format("YYYY-MM-DD-HH-mm-ss");
        let option = {};
        option.fileName = '民事诉讼案件模板_' + aData
        let Obj = [{
          "": ""
        }];
        option.datas = [{
          sheetData: Obj,
          sheetName: '民事诉讼案件模板',
          //sheetFilter: this.excelColumn,
          sheetHeader: this.excelTitle,
          //columnWidths: [10,10,20,10]//对应的列宽，置为屏宽的百分比，40%
        }, ];

        var toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
      },

      reset() {
        this.paramsInfo = {
          name: "",
          identificationNumber: "",
          cardNumber: "",
          progressCases: "",
          outCompanyName: "",
        };

      },
      search() {
        this.currentPage = 1;
        this.checkInfo();
      },
      checkInfo() {
        this.$set(this.paramsInfo,"page",this.currentPage);
        this.$set(this.paramsInfo,"pageSize",this.pageSize);
        this.$set(this.paramsInfo,"bussType",1);//1为民事案件

        this.$axios({
            method: "post",
            url: `/CMC/reserver/list/data`,
            data: this.paramsInfo,
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {

              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 40px;
      line-height: 40px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          padding-left: 30px;
          padding-top: 40px;
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 70vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }

    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }

  @import "../../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 80px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText {
    width: 60px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }
</style>
